<template>
    <div>
        <div class="typesList" v-show="isOk">
            <div class="header-types">保险产品分类列表</div>
            <div class="header-top">
                <el-input v-model="select.input" placeholder="请输入内容"  style="width:15%;padding-right:10px"></el-input>
                 <el-button type="info" @click="search(select)" >搜索</el-button>
            </div>
            

            <el-table :data="types" style="width: 70%">
                <el-table-column label="编号" width="300px">
                    <template slot-scope="scope">
                        <i class="el-icon-star-on"></i>
                        <span style="margin-left: 10px">{{
                            scope.row._id
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品分类名称" width="220">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{
                            scope.row.typesName
                        }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"
                            >修改</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row._id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[3, 5, 7]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totals"
                >
                </el-pagination>
            </div>
        </div>

        <div class="typesList" v-show="!isOk">
            <div class="header-types">修改产品分类信息</div>
            <el-form ref="form" :model="newtypes" label-width="100px">
                <el-form-item label="编号">
                    <el-input
                        v-model="newtypes._id"
                        :disabled="true"
                        class="addTypes"
                    ></el-input>
                </el-form-item>
                <el-form-item label="保险产品分类">
                    <el-input
                        v-model="newtypes.typesName"
                        class="addTypes"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="modifyTypes1(newtypes)"
                        >立即修改</el-button
                    >
                    <el-button @click="isOk = !isOk">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapState, mapMutations } = createNamespacedHelpers("types");

export default {
    data() {
        return {
            // totals:总共页数，tableData：获取的数据，pageSize：页面渲染的数据，currentPage：当前页
            isOk: true,
            newtypes: {},
            select:{
                input: '',
                selectValue:"typesName",
            }
            }
           
    },
    mounted() {
        this.getTypes({pageSize:3});
        this.getTypes();
    },
    computed: {
        ...mapState(["types", "tableData", "totals","pageSize","currentPage"]),
    },
    methods: {
        //获取产品分类的数据
        ...mapActions([
            "getTypes",
            "deleteTypesId",
            "modifyTypes",
            "getTypesId",
            "searchTypes"
        ]),
        ...mapMutations(['setpageSize','setcurrentPage']),
        //  分页
        handleSizeChange(val) {
          this.setpageSize(val)
        },
        handleCurrentChange(val) {
          this.setcurrentPage(val)
        },
        //修改
        handleEdit(index, row) {
            this.isOk = false;
            this.newtypes = row;
        },

        //获取删除时对应的数据
        async handleDelete(_id) {
            let data = await this.getTypesId(_id);
            console.log(data[0].insuresData.length);
            if (data[0].insuresData.length > 0) {
                this.$message({
                    message: "此分类下还有数据，不可删除",
                    type: "warning",
                });
            } else {
                this.deleteTypesId(_id);
                this.getTypes();
            }
        },
        //确认修改
        async modifyTypes1(newtypes) {
            console.log(newtypes);
            const data = await this.modifyTypes(newtypes);
            if (data.code) {
                this.isOk = !this.isOk;
            }
        },
        //搜索
       async search(select){
        const data= await  this.searchTypes(select)
        console.log(data);
       
        }
    },
    watch: {
        pageSize() {
            this.getTypes();
        },
        currentPage() {
            this.getTypes();
        },
    },
};
</script>

<style scoped>
.addTypes {
    width: 20%;
}

.header-types {
    margin: 20px 30px 30px 20px;
    height: 30px;
    font-size: 20px;
    color: rgb(109, 109, 109);
}
.header-top{
    margin-bottom: 10px;
}
</style>